<template>
  <div class="city">
    <div class="map" id="allmap"></div>

    <!-- 顶部导航 -->
    <van-nav-bar
      title="不凡地图"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索地图关键词" />
    <ul>
      <p @click="target(item)" v-for="item in mapList" :key="item.uid">
        {{ item.title }}
      </p>
    </ul>
    <div class="map">
      <p>当前位置为:</p>
      <div id="container"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      value: "",
      map: "",
      mapList: [],
    };
  },

  created() {},

  mounted() {
    // 百度地图API功能
    if (JSON.parse(localStorage.getItem("point")).lat) {
      var map = new BMap.Map("container");
      map.centerAndZoom(
        new BMap.Point(
          JSON.parse(localStorage.getItem("point")).lng,
          JSON.parse(localStorage.getItem("point")).lat
        ),
        11
      );
      var mk = new BMap.Marker(JSON.parse(localStorage.getItem("point")));
      map.addOverlay(mk);
      map.panTo(JSON.parse(localStorage.getItem("point")));
      this.map = map;
    } else {
      var map = new BMap.Map("container");
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      this.map = map;
    }
  },
  watch: {
    value() {
      this.search();
    },
  },
  methods: {
    target(local) {
      localStorage.setItem("point", JSON.stringify(local.point));
      this.$router.push({
        name: "Home",
        params: {
          local: local.title,
        },
      });
    },
    onClickLeft() {
      this.$router.push({ path: "/home" });
    },
    onClickRight() {
      console.log("object");
    },
    search() {
      var _this = this;
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(results.Hr);
            _this.mapList = results.Hr;
          }
        },
      };
      var local = new BMap.LocalSearch(this.map, options);
      local.search(this.value);
    },
  },

  computed: {},
};
</script>

<style scoped lang='less'>
.city {
  width: 375px;
  height: 617px;
  background-color: #fff;
  position: relative;
  .map {
    position: fixed;
    left: 0;
    bottom: 0;
    p {
      text-align: left;
      padding: 10px;
      font-size: 14px;
    }
    #container {
      overflow: hidden;
      width: 375px;
      height: 150px;
      margin: 0;
      font-family: "微软雅黑";
    }
  }
}

.van-search {
  padding-bottom: 0;
}
ul {
  width: 355px;
  padding: 10px;
  background-color: #fff;
  overflow: hidden;
  p {
    font-size: 14px;
    padding: 2px 0 2px 10px;
    width: 300px;
    float: left;
    text-align: left;
    margin: 5px auto;
    &:hover {
      color: red;
    }
  }
}
</style>